<template>
    <div class="menus-list-row">
        <template v-for="(item, index) in list">
            <div v-if="isRouter(item.enter)" class="menu-item router">
                <router-link :to="item.enter">
                    <svg class="icon" aria-hidden="true">
                        <use :xlink:href="`#${item.icon}`" />
                    </svg>
                    <p>{{ item.name }}</p>
                </router-link>
            </div>
            <div v-else class="menu-item">
                <a :href="item.enter">
                    <svg class="icon" aria-hidden="true">
                        <use :xlink:href="`#${item.icon}`" />
                    </svg>
                    <p>{{ item.name }}</p>
                </a>
            </div>
        </template>
    </div>
</template>
<script>
export default {
    props: ['list'],
    data() {
        return {}
    },
    methods: {
        isRouter(path) {
            return this.$router.options.routes.findIndex(item => item.path == path) !== -1
        }
    },
}
</script>
<style scoped>
.menus-list-row {
    display: flex;
    flex-wrap: wrap;
    background: white;
    margin-top: 10px;
    padding-top: 10px;
}

.menu-item {
    width: 25%;
    text-align: center;
    margin-bottom: 15px;
}



.menu-item svg.icon {
    width: 4em;
    height: 4em;
}

.menu-item p {
    margin: 0;
    text-align: center;
    color: black;
    font-size: 1em;
}
</style>